import React, { useCallback, useState } from 'react'
import AssistantCard from '@COMPONENTS/Card/AssistantCard'
import { ChoiceITF } from '@INTERFACES/Survey'
import { LanguageType } from '@INTERFACES/Common'
import i18n from '@I18N'
import { QUESTION_STYLE_ENUM } from '@CONSTANTS/survey'
import ScaleContent from '@COMPONENTS/Survey/ScaleContent'
import { getPlatform } from '@UTILS/common'
import style from '@COMPONENTS/Decision/ScaleCard.module.scss'

const { isWX } = getPlatform()

interface Props {
  title: string,
  questionStyle: string,
  data: ChoiceITF[],
  language: LanguageType,
  answerChoice: ChoiceITF,
  onClickChoice: (choice: ChoiceITF) => void
}

const ScaleCard: React.FC<Props> = ({ title, questionStyle, data, answerChoice, language, onClickChoice }) => {
  const [currentAnswerChoice, setCurrentAnswerChoice] = useState<ChoiceITF>(answerChoice || data?.[0])
  const isPain = QUESTION_STYLE_ENUM.PainScale === questionStyle
  const onClickConfirm = useCallback(() => {
    onClickChoice?.(currentAnswerChoice)
  }, [currentAnswerChoice, onClickChoice])
  const onClickChoiceFuc = useCallback(val => {
    const choice = data[val]
    setCurrentAnswerChoice(choice)
  }, [data])
  const styleProps = isPain ? {
    containerStyle: style.scalePainContainer,
    sliderStyle: isWX ? style.sliderWXStyle : style.sliderStyle,
    contentStyle: isWX ? style.contentWX : style.content,
    topTextStyle: style.topTextStyle,
    textStyle: style.textTipStyle,
    descTipStyle: style.descTipStyle,
  } : {
    containerStyle: isWX ? style.scaleWXContainer : style.scaleContainer,
    sliderStyle: isWX ? style.sliderWXStyle : style.sliderStyle,
    contentStyle: isWX ? style.contentWX : style.content,
    textStyle: style.textTipStyle,
  }
  return (
    <AssistantCard
      isHasBtn
      btnText={i18n.common.confirm()}
      title={title}
      onClickBtn={onClickConfirm}
    >
      <ScaleContent
        data={data}
        answerChoice={answerChoice?.Label}
        language={language}
        isPain={isPain}
        onSelect={onClickChoiceFuc}
        showBubble={isPain}
        widthOffset={21}
        blockSize={isPain ? 20 : 16}
        initialWidth={-6}
        {...styleProps}
      />
    </AssistantCard>
  )
}

export default ScaleCard
